import { FC, useState, useEffect } from 'react';
import { Space, Card, Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

const Index: FC = () => {
  // 获取了一个form实例，要加在form组件的form属性上面
  const [form] = Form.useForm();
  // 想去刷新页面，可以使用forceUpdate
  // const [, forceUpdate] = useState({});
  // useEffect(() => {
  //   forceUpdate({});
  // }, []);

  // 当submit的按钮被点击的时候，就会触发onFinish函数
  const onFinish = (values: any) => {
    console.log('Finish:', values);
  };

  const fn = () => {
    // 如果提交按钮是在form表单之外，只能使用form实例
    // getFieldsValue用于获取整个表单数据
    // isFieldsTouched用于判断是否操作过这些所有的字段
    // form.getFieldsError用来获取字段的验证有没有错误
    // resetFields用于清空(重置)form表单
    // setFieldsValue用于修改form的默认值，默认值是不能使用setState的
    // validateFields用于提交之前的验证

    // console.log(form.getFieldsValue());
    // console.log(form.getFieldValue('username'));
    // if (form.isFieldsTouched(true) && form.getFieldsError().filter(({ errors }) => errors.length).length === 0) {
    //   console.log(form.getFieldsValue())
    // }
    // form.resetFields();
    // form.setFieldsValue({
    //   username: "lisi",
    //   password: "123456"
    // })

    form
      .validateFields()
      .then((values) => {
        console.log(values);
      })
      .catch((errorInfo) => {
        console.log(errorInfo);
      });
  };

  // const [obj, set_obj] = useState({});

  // useEffect(() => {
  //   setTimeout(() => {
  //     set_obj({
  //       username: "zhangsan",
  //       password: "123"
  //     })
  //   }, 2000)
  // }, [])

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="行内登录表单">
        <Form
          form={form}
          name="horizontal_login"
          layout="inline"
          onFinish={onFinish}
          // initialValues={{
          //   username: "zhangsan",
          //   password: "123"
          // }}
        >
          {/* Form.Item可以作为一个容器 */}
          {/* name属性表示的是对象的key */}
          {/* rules表示规则, 自定义匹配的要求 */}
          <Form.Item
            name="username"
            // initialValue="zhangsan"
            label="姓名"
            rules={[
              // 加了required: true以后，在label上面有红色的必填星号
              { required: true, message: 'Please input your username!' },
              {
                max: 5,
                message: '最大长度为5',
              },
              // {
              //   pattern: /^1[3456789]\d{9}$/,
              //   message: '请输入正确的手机号',
              // },
              // ({ getFieldValue }) => ({
              //   // getFieldValue可以用来获取表单的输入的内容
              //   validator(_, value) {
              //     if (value && value.length <= 5) {
              //       // console.log(getFieldValue('password'));
              //       return Promise.resolve();
              //     } else {
              //       return Promise.reject(new Error('最大长度为5位'));
              //     }
              //   },
              // }),
            ]}
          >
            {/* 在form里面的input是不需要写成受控组件的 */}
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item shouldUpdate>
            {() => (
              <Button
                type="primary"
                htmlType="submit"
                disabled={
                  !form.isFieldsTouched(true) ||
                  !!form.getFieldsError().filter(({ errors }) => errors.length)
                    .length
                }
              >
                Log in
              </Button>
            )}
          </Form.Item>
        </Form>

        <Button onClick={fn}>Log in</Button>
      </Card>
    </Space>
  );
};

export default Index;
